<template>
  <div>
    <div class="status" v-for="(list,index) in purchaseList" :key="list.purchase_id">
      <div class="content">
        <div v-if="list.status_str=='已通过'" class="examine-status">{{list.status_str}}</div>
        <div v-else class="examine-status no-examine">{{list.status_str}}</div>
        <div class="pay">
          <div>申请时间：{{list.create_time}}</div>
          <div>处理时间：{{list.update_time}}</div>
          <div>进货单号： {{list.purchase_number}}</div>
          <div class="details dhs">
            <div v-if="type == 3 || type == 4">申请等级： {{list.apply_rank}}</div>
            <div v-if="type == 2 || type == 4">申请订货商： {{list.lower_info}}</div>
            <div v-else>当前处理订货商： {{list.direct_info}}</div>

          </div>
          <div class="address-wrap" v-if="type == 1 || type == 2">
            <div class="label">收货地址：</div>
            <div class="value" v-html="list.remark"></div>
          </div>

        </div>
        <div class="details content" v-for="item in list.buy_info" :key="item.item_id">
          <div class="show-img">
            <img :src="item.pic_url">
          </div>
          <div class="list">
            <div class="title"><img src="https://img.wifenxiao.com/h5-wfx/images/DZ/qmsc/bzj-tag.png" class="tag" v-if="item.is_bond_item == 1">{{item.title}}</div>
            <div class="sku" v-if="item.props">规格：{{item.props}}</div>
            <div class="peyment">
              <div>进货价:<span v-html="scaleGoodsPriceFn(item.purchase_price, 'package')"></span></div>
              <div>数量:{{item.num}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="money-bottom">
        <div class="total">进货总金额:<span v-html="scaleGoodsPriceFn(list.total_price, 'package')"></span></div>
        <div class="agree" v-if="agreeShow && list.status_str=='待审核'" @click="onHandle(list,index)">处理</div>
      </div>
      <div class="receipt-button" v-if="type == 1 && list.is_receipt">
        <span @click="handleLinkTo('orderReceipt', {purchase_id: list.purchase_id})">回执单</span>
      </div>
    </div>
    <!--  处理弹窗  -->
    <transition name="handle">
      <div class="handle-wrap" v-if="isHandle">
        <div class="handle-main">
          <div class="handle-main-title">申请处理</div>
          <div class="handle-main-content">处理后不可修改，请核对后操作。</div>
          <div class="handle-footer">
            <div class="refuse" @click="refuseClick()">拒绝</div>
            <div class="agreeBtn" @click="onAgree()">同意</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { scaleGoodsPrice } from '@/utils/index.js'
import { auditPurchase } from '@/api/dz/dzCcbd'

export default {
  props: {
    purchaseList: {
      type: Array,
      default: []
    },
    agreeShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      type: 1,
      purchase: {
        purchase_id: '',
        // type: 0, // 0进货 1升级
        operate_type: 'agree'
      },
      handleItem: {}, // 点击处理按钮 数据
      handleIndex: 0, // 点击处理按钮 Index
      isHandle: false
    }
  },
  created() {
    if (this.$route.query.type) {
      this.type = this.$route.query.type
    } else {
      this.type = 1
    }
  },
  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price, 'large')
    },
    // 同意事件
    onAgree() {
      this.purchase.purchase_id = this.handleItem.purchase_id
      if (this.type == 2) {
        this.purchase.type = 0
      } else if (this.type == 4) {
        this.purchase.type = 1
      }
      auditPurchase(this.purchase).then(res => {
        this.isHandle = false
        if (res.status == 1) {
          this.$Error('申请通过')
          this.purchaseList[this.handleIndex].status_str = '已通过'
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 处理按钮--事件
    onHandle(data, index) {
      this.handleItem = data
      this.handleIndex = index
      this.isHandle = true
    },
    // 拒绝事件
    refuseClick() {
      this.purchase.purchase_id = this.handleItem.purchase_id
      if (this.type == 2) {
        this.purchase.type = 0
      } else if (this.type == 4) {
        this.purchase.type = 1
      }
      this.purchase.operate_type = 'reject'
      auditPurchase(this.purchase).then(res => {
        this.isHandle = false
        if (res.status == 1) {
          this.$Error('申请已拒绝')
          this.purchaseList[this.handleIndex].status_str = '已拒绝'
        } else {
          this.$Error(res.msg)
        }
      })
      this.isHandle = false
    },
    handleLinkTo(url, data) {
      this.$JumpName(this, url, data)
    }
  }
}
</script>
<style lang="scss">
.status{
  margin: 16px;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  .content{
    margin-bottom: 24px;
    position: relative;
    .examine-status{
      position: absolute;
      right: 0;
      top: 0;
      font-weight: 500;
      color: #7AB965;
      font-size: 26px;
      &.no-examine{
        color: #F42B2B;
      }
    }
  }
  .pay{
    margin: 10px 0;
    color: #666;
    font-size: 24px;
    div{
      padding: 10px 0;
    }
  }
  .details{
    display: flex;
    font-size: 24px;
    &.dhs{
      div{
        flex: 1;
        padding: 0;
      }
    }
    .show-img{
      width: 180px;
      height: 180px;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
      }
    }
    .list{
      margin-left: 20px;
      flex: 1;
      position: relative;
      .title{
        font-size: 28px;
        line-height: 40px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:2;
        text-align: justify;
        overflow: hidden;
        .tag{
          width: 68px;
          margin-right: 10px;
          position: relative;
          top: 6px;
        }
      }
      .peyment{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .money-bottom{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    align-items: center;
    .agree{
      padding: 6px 32px;
      background: #F42B2B;
      color: #fff;
      border-radius: 32px;
      margin-left: 28px;
      // height: 16px;
      // line-height: 16px;
    }
    .total{
      text-align: right;
      font-size: 28px;
      color: #F42B2B;
    }
  }
  .receipt-button {
    text-align: right;
    >span {
      color: #fff;
      background: #F42B2B;
      display: inline-block;
      padding: 10px 40px;
      border-radius: 10px;
      margin-bottom: 20px;
    }
  }
}
.sku{
  margin-top: 12px;
  font-size: 24px;
  color: #9e8d8d;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
  text-align: justify;
  overflow: hidden;
}
  .handle-wrap{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    .handle-main{
      width: 80%;
      height: 400px;
      background-color: white;
      border-radius: 10px;
      margin: 250px auto;
      position: relative;
      .handle-main-title{
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #e4e4e4;
        line-height: 100px;
        padding-left: 20px;
        font-size: 36px;
        font-weight: 500;
      }
      .handle-main-content{
        font-size: 28px;
        color: #666666;
        padding: 80px 20px 0 20px;
        text-align: center;
      }
      .handle-footer{
        width: 100%;
        height: 100px;
        position: absolute;
        left: 0;
        bottom: 0;
        div{
          float: left;
          width: 50%;
          line-height: 80px;
          text-align: center;
          font-size: 30px;
        }
        .refuse{
          color: #323233;
        }
        .agreeBtn{
          color:#F42B2B;
        }

      }
    }
  }
.handle-enter,.handle-leave-to{
  opacity: 0;
}
.handle-enter-to,.handle-leave{
  opacity: 1;
}
.handle-enter-active,.handle-leave-active{
  transition: all 0.5s;
}
.address-wrap {
  display: flex;
  div {
    padding: 0 !important;
  }
  .label {
    flex-shrink: 0;
  }
}
</style>
